import React, { useEffect, useState } from "react";
import { Avatar, Button, Input, List, Modal, Space, Typography, message } from "antd";
import { ProCard } from "@ant-design/pro-components";
import { UserOutlined } from "@ant-design/icons";
import ScrollBar from "@/components/ScrollBar";
import { dynamicTenant, getTenantAll } from "@/services/api/module/tenant/tenant/tenants";

const TenantModal: React.FC<{
	open: boolean;
	onClose: () => void;
}> = ({ open = false, onClose = () => {} }) => {
	const [loading, setLoading] = useState(false);
	const [data, setData] = useState<any[]>([]);
	const [currentTenant, setCurrentTenant] = useState<any>({});
	const [confirmLoading, setConfirmLoading] = useState(false);
	const loadMoreData = () => {
		setLoading(true);
		getTenantAll().then(data => {
			setLoading(false);
			setData(data);
		});
	};

	useEffect(() => {
		if (open) {
			loadMoreData();
		}
	}, [open]);

	const handleDynamic = () => {
		if (currentTenant) {
			setConfirmLoading(true);
			dynamicTenant(currentTenant.tenantId)
				.then(res => {
					message.success(res?.msg);
					setConfirmLoading(false);
					onClose();
					location.reload();
				})
				.catch(() => {
					setConfirmLoading(false);
				});
		}
	};
	return (
		<>
			<Modal
				title="切换租户"
				open={open}
				width={900}
				style={{ top: "15%" }}
				okText="确定"
				onOk={handleDynamic}
				confirmLoading={confirmLoading}
				onCancel={onClose}
			>
				<ProCard gutter={10} ghost>
					<ProCard
						bordered
						headerBordered
						title={<Input.Search style={{ width: 300 }} allowClear></Input.Search>}
						bodyStyle={{ height: 400, overflow: "scroll", padding: 0 }}
					>
						<ScrollBar height={400} autoHide>
							<List
								dataSource={data}
								size="small"
								footer={<></>}
								renderItem={item => (
									<List.Item
										key={item.id}
										extra={
											<Button
												type="link"
												size="small"
												onClick={() => {
													setCurrentTenant(item);
												}}
											>
												切换
											</Button>
										}
									>
										<Space>
											<Avatar src={item?.logo} />
											<Typography>{item.companyName}</Typography>
										</Space>
									</List.Item>
								)}
							/>
						</ScrollBar>
					</ProCard>
					<ProCard title="当前租户" headerBordered bordered bodyStyle={{ padding: 0 }}>
						{currentTenant && (
							<Space direction="vertical" style={{ padding: "16px 16px" }}>
								<Space direction="vertical">
									<Avatar size={50} src={currentTenant?.logo} />
									<Typography.Title level={5}>{currentTenant?.companyName}</Typography.Title>
								</Space>
								<Typography.Text type="secondary" style={{ padding: "5px 0px" }}>
									{currentTenant?.intro}
								</Typography.Text>
							</Space>
						)}
						{/* <List
							dataSource={[
								{
									id: 1,
									tenantId: "000000",
									contactUserName: "默认联系人",
									contactPhone: "13110788888",
									companyName: "默认租户",
									licenseNumber: null,
									address: null,
									domain: null,
									intro: "HOV多租户管理系统",
									remark: null,
									packageId: null,
									expireTime: null,
									accountCount: -1,
									status: "0",
									logo: "https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
								}
							]}
							size="small"
							renderItem={item => (
								<List.Item key={item.id}>
									<List.Item.Meta avatar={<Avatar src={item?.logo} />} title={<>{item?.companyName}</>} />
								</List.Item>
							)}
						/> */}
					</ProCard>
				</ProCard>
			</Modal>
		</>
	);
};

export default TenantModal;
